<template>
  <div class="secondTab">
    <div class="first-tab">
      <div class="tablistbox">
        <a
          href="javascript:void(0);"
          :class="index == isactive ? 'active' : ''"
          @click="handelchange(index)"
          :key="index"
          v-for="(item, index) in tablist"
          >{{ item.name }}&nbsp;&nbsp;
          <el-tooltip placement="right">
            <div slot="content">
              瀑布式项目管理模型，最基本也最常用的一种项目管理模型，又称线性模型。<br />
              采用瀑布模型的项目依照该模型选定的阶段顺序进行，先有完整的规划，然后<br />
              按部就班往前推进，中间不能出一点差错，追求的是“一次成型”。每一个阶<br />
              段的工作产品都是下一个阶段工作的输入，每一个阶段只有在上一个阶段通过<br />
              检查，确认完成后才会开始新的阶段工作。
            </div>
            <span class="introductionBox">？</span>
          </el-tooltip></a
        >
      </div>
      <survey :is="currentView" keep-alive></survey>
    </div>
  </div>
</template>

<script>
// import calendar from './newWaterFall/calendar.vue';
// import introduce from './newWaterFall/introduce.vue';
import survey from './newBuildProject/wfsurvey.vue';
// import tasklist from './newWaterFall/task.vue';
// import teaching from './newWaterFall/teaching.vue';
export default {
  name: 'secondTab',
  data() {
    return {
      isactive: 0,
      tablist: [
        { name: '项目概况' }
        // { name: '项目介绍' },
        // { name: '任务列表' },
        // { name: '项目日历' },
        // { name: '教学资料' }

      ],
      currentView: 'survey'
    };
  },
  components: {
    // calendar,
    // introduce,
    survey
    // tasklist,
    // teaching
  },
  methods: {
    handelchange(index) {
      this.isactive = index;
      if (index === 0) {
        this.currentView = 'survey';
      } else if (index === 1) {
        this.currentView = 'introduce';
      } else if (index === 2) {
        this.currentView = 'tasklist';
      } else if (index === 3) {
        this.currentView = 'calendar';
      } else if (index === 4) {
        this.currentView = 'teaching';
      }
    }
  }
};
</script>

<style lang="less" scoped>
.first-tab {
  a {
    color: #555;
    width: 140px;
    height: 55px;
    border: 1px solid #ececec;
    line-height: 55px;
    font-size: 14px;
    text-align: center;
    background: #ffffff;
    border: 1px solid #ececec;
    display: inline-block;
    box-shadow: 0px 0px 1px 0px #99999980;
  }
  .active {
    position: relative;
    cursor: default;
    width: 140px;
    height: 65px;
    line-height: 70px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px 8px 0px 0px;
    border-bottom: none;
    box-shadow: 1px -2px 3px 0px #99999980;
    .introductionBox {
      cursor: pointer;
    }
  }
}
</style>
